import React, { Component } from 'react';
import { connect } from 'react-redux'  
import { Modal, Form, Input,Select ,Table,Button, Popconfirm} from 'antd';
import { imgUrl } from '../../config/system';
var _this,_props,_state;

const FormItem = Form.Item;

class PresetDetailModal extends Component {
  constructor(props) {
    super(props);
  }

  okHandler = () => {
     const { onOk } = this.props;
     this.props.form.validateFields((err, values) => {
      if (!err) {
        onOk(values);
      }
     });
  };

  deleteHandler = (id) => {
     const { onDel } = this.props;
     onDel(id);
  }; 

  onEditItem(id){
    const { onSelectDetailInfo } = _props;
     onSelectDetailInfo(id);
  }

  createHandler(values){
     const { onCreateDetail } = _props;
     onCreateDetail(values);
  }

  exportAssetHandler(values){
     const { onExportDetail } = _props;
     onExportDetail(values);
  }

  
  render() {
    const { children, dispatch,roomList,detailList, } = this.props;
    const { getFieldDecorator } = this.props.form;
    _this = this;
    _state = this.state;
    _props = this.props;   

    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };
    const columns = [{
    title: '资产编号',
    dataIndex: 'assetNo',
    key: 'assetNo',
    width: 120,
  },{
    title: '资产分类',
    dataIndex: 'typeName',
    key: 'typeName',
    width: 100,
  },{
    title: '设备名称',
    dataIndex: 'assetName',
    key: 'assetName',
    width: 120,
  },{
    title: '品牌',
    dataIndex: 'brandName',
    key: 'brandName',
    width: 100,    
  },{
    title: '设备型号',
    dataIndex: 'modelName',
    key: 'modelName',
    width: 120,
  },{
    title: 'RFID号',
    dataIndex: 'rfidNo',
    key: 'rfidNo',
    width: 100,
  },{
    title: '资产序列号',
    dataIndex: 'serialNo',
    key: 'serialNo',
    width: 100,
  },{
    title: '价格',
    dataIndex: 'price',
    key: 'price',
    width: 100,
  },{
    title: '备注',
    dataIndex: 'remark',
    key: 'remark',
    width: 130,
  },{
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: 80,
    render: (text, record) => {
      if (record.status == 1) {
        return '预置';
      };
      if (record.status ==2) {
        return '已验收';
      };  
    },
  },{
    title: '操作',
    key: 'operation',
    width: 100,
    render: (text, record) => (
        <span>
           {(record.status==1)?(
                <span>
                   <a onClick={this.onEditItem.bind(null, record.id_)}>编辑</a>
                   <span className="ant-divider" />
                   <Popconfirm title="确认删除？" onConfirm={this.deleteHandler.bind(null, record.id_)}>
                   <a>删除</a>
                   </Popconfirm>
                </span> 
               ):(record.status==2)?(
                <span>                   
                   验收完成
                </span> 
               ):''}                    
        </span>
    ),
  }];  
   
    return (
      <span>
        <Modal
                maskClosable= {this.props.maskClosable}
                confirmLoading= {this.props.confirmLoading}
                title={this.props.title}
                style={{ top: 50}}
                width={1000}
                visible={this.props.visible}
                footer={[
                  <Button  key="close" type="primary" size="large" onClick={this.props.onCancel}>关闭</Button>
                ]}
                onCancel={this.props.onCancel}
                key={this.props.newKey}
        >
          <div style={{width:'auto',height:document.body.clientHeight - 220,position:'relative',backgroundColor:'#fff'}}>

             <div style={{width:'100%',height:'40px',backgroundColor:'#fff',marginTop:'-10px',lineHeight:'40px',paddingLeft:'10px',}}>       
              <Form layout="inline">                
                  <FormItem>
                     <Button type="primary" size='large'  onClick={this.createHandler}>新增</Button>
                  </FormItem>
                  <FormItem>    
                    <Button type="primary" size='large' onClick={this.exportAssetHandler}>导入采购清单</Button>
                  </FormItem>  
                  <FormItem>    
                    <a href={imgUrl+"/ImportTemplates.xlsx"} ><Button size="large" style={{ marginRight: '10px' }} >下载模板</Button></a>
                  </FormItem>  
              </Form>
           </div>


              <div style={{minHeight:'100%'}}>                
                  <div style={{width:'100%',height:'100%',paddingLeft:'20px',paddingTop:'10px'}}>
                    <Table columns={columns}
                        rowKey={record => record.id_}                  
                        dataSource={this.props.detailList} 
                        pagination={false} 
                        scroll={{ y: document.body.clientHeight - 290 }}
                        
                  />
                  </div>
              </div>     
       </div>       

        </Modal>
        
      </span>
    );
  }
    
}

export default Form.create()(PresetDetailModal)
